<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<title>Dynatree - Example</title>

	<script src='../jquery/jquery.js' type='text/javascript'></script>
	<script src='../jquery/ui.core.js' type='text/javascript'></script>
    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

	<link href='../src/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
	<script src='../src/jquery.dynatree.js' type='text/javascript'></script>

	<!-- Start_Exclude: This block is not part of the sample code -->
	<link href="prettify.css" rel="stylesheet">
	<script src="prettify.js" type='text/javascript'></script>
	<link href='sample.css' rel='stylesheet' type='text/css'>
    <script src='sample.js' type='text/javascript'></script>
	<!-- End_Exclude -->
    
<script type='text/javascript'>
	var treeData = [
		{title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
		{title: "item2: selected on init", select: true },
		{title: "Folder with some children", isFolder: true, key: "id3",
			children: [
				{title: "Sub-item 3.1",
					children: [
						{title: "Sub-item 3.1.1", key: "id3.1.1" },
						{title: "Sub-item 3.1.2", key: "id3.1.2" }
					]
				},
				{title: "Sub-item 3.2",
					children: [
						{title: "Sub-item 3.2.1", key: "id3.2.1" },
						{title: "Sub-item 3.2.2", key: "id3.2.2" }
					]
				}
			]
		},
		{title: "Documnent with some children (expanded on init)", key: "id4", expand: true,
			children: [
				{title: "Sub-item 4.1 (active on init)", activate: true,
					children: [
						{title: "Sub-item 4.1.1", key: "id4.1.1" },
						{title: "Sub-item 4.1.2", key: "id4.1.2" }
					]
				},
				{title: "Sub-item 4.2 (selected on init)", select: true,
					children: [
						{title: "Sub-item 4.2.1", key: "id4.2.1" },
						{title: "Sub-item 4.2.2", key: "id4.2.2" }
					]
				}
			]
		}
	];
	$(function(){
		
		// --- Initialize sample trees
		$("#tree1").dynatree({
			checkbox: true,
			selectMode: 1,
			children: treeData,
			onActivate: function(dtnode) {
				$("#echoActive1").text(dtnode.data.title);
			},
			onSelect: function(select, dtnode) {
				// Display list of selected nodes
				var s = dtnode.tree.getSelectedNodes().join(", ");
				$("#echoSelection1").text(s);
			},
			onDblClick: function(dtnode, event) {
				dtnode.toggleSelect();
			},
			onKeydown: function(dtnode, event) {
				if( event.which == 32 ) {
					dtnode.toggleSelect();
					return false;
				}
			},
			// The following options are only required, if we have more than one tree on one page: 
//			initId: "treeData",
			cookieId: "ui-dynatree-Cb1",
			idPrefix: "ui-dynatree-Cb1-"
		});

		$("#tree2").dynatree({
			checkbox: true,
			selectMode: 2,
			children: treeData,
			onSelect: function(select, dtnode) {
				// Display list of selected nodes
				var selNodes = dtnode.tree.getSelectedNodes();
				// convert to title/key array
				var selKeys = $.map(selNodes, function(node){
					   return "[" + node.data.key + "]: '" + node.data.title + "'";
				});
				$("#echoSelection2").text(selKeys.join(", "));
			},
			onClick: function(dtnode, event) {
				dtnode.toggleSelect();
			},
			onKeydown: function(dtnode, event) {
				if( event.which == 32 ) {
					dtnode.toggleSelect();
					return false;
				}
			},
			// The following options are only required, if we have more than one tree on one page: 
			cookieId: "ui-dynatree-Cb2",
			idPrefix: "ui-dynatree-Cb2-"
		});

		$("#tree3").dynatree({
			checkbox: true,
			selectMode: 3,
			children: treeData,
			onSelect: function(select, dtnode) {
				// Get a list of all selected nodes, and convert to a key array:
				var selKeys = $.map(dtnode.tree.getSelectedNodes(), function(node){
					return node.data.key;
				});
				$("#echoSelection3").text(selKeys.join(", "));

				// Get a list of all selected TOP nodes
				var selRootNodes = dtnode.tree.getSelectedNodes(true);
				// ... and convert to a key array:
				var selRootKeys = $.map(selRootNodes, function(node){
					return node.data.key;
				});
				$("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
				$("#echoSelectionRoots3").text(selRootNodes.join(", "));
			},
			onDblClick: function(dtnode, event) {
				dtnode.toggleSelect();
			},
			onKeydown: function(dtnode, event) {
				if( event.which == 32 ) {
					dtnode.toggleSelect();
					return false;
				}
			},
			// The following options are only required, if we have more than one tree on one page: 
//				initId: "treeData",
			cookieId: "ui-dynatree-Cb3",
			idPrefix: "ui-dynatree-Cb3-"
		});

		$("#tree4").dynatree({
			checkbox: false,
			selectMode: 2,
			children: treeData,
			onQuerySelect: function(select, dtnode) {
				if( dtnode.data.isFolder )
					return false;
			},
			onSelect: function(select, dtnode) {
				// Display list of selected nodes
				var selNodes = dtnode.tree.getSelectedNodes();
				// convert to title/key array
				var selKeys = $.map(selNodes, function(node){
					   return "[" + node.data.key + "]: '" + node.data.title + "'";
				});
				$("#echoSelection4").text(selKeys.join(", "));
			},
			onClick: function(dtnode, event) {
				if( ! dtnode.data.isFolder )
					dtnode.toggleSelect();
			},
			onDblClick: function(dtnode, event) {
				dtnode.toggleExpand();
			},
			onKeydown: function(dtnode, event) {
				if( event.which == 32 ) {
					dtnode.toggleSelect();
					return false;
				}
			},
			// The following options are only required, if we have more than one tree on one page: 
//			initId: "treeData",
			cookieId: "ui-dynatree-Cb4",
			idPrefix: "ui-dynatree-Cb4-"
		});

        $("#btnToggleSelect").click(function(){
            $("#tree2").dynatree("getRoot").visit(function(dtnode){
                dtnode.toggleSelect();
            });
            return false;
        });
        $("#btnDeselectAll").click(function(){
            $("#tree2").dynatree("getRoot").visit(function(dtnode){
                dtnode.select(false);
            });
            return false;
        });
        $("#btnSelectAll").click(function(){
            $("#tree2").dynatree("getRoot").visit(function(dtnode){
                dtnode.select(true);
            });
            return false;
        });
		
	});
</script>
</head>

<body class="example">
	<h1>Example: Selection and checkbox</h1>
	
	<!-- Tree #1 -->
		
	<p class="description">
		This tree has <b>checkoxes and selectMode 1 (single-selection)</b> enabled.<br>
		A double-click handler selects the node. A keydown handler selects on [space].
	</p>
	<div id="tree1"></div>
	<div>Active node: <span id="echoActive1">-</span></div>
	<div>Selection: <span id="echoSelection1">-</span></div>
	
	
	<!-- Tree #2 -->
		
	<p class="description">
		This tree has <b>selectMode 2 (multi-selection)</b> enabled.<br>
		A single-click handler selects the node. A keydown handler selects on [space].
	</p>
	<p>
		<a href="#" id="btnSelectAll">Select all</a> -
		<a href="#" id="btnDeselectAll">Deselect all</a> -
		<a href="#" id="btnToggleSelect">Toggle select</a>
	</p>
	<div id="tree2"></div>
	<div>Selected keys: <span id="echoSelection2">-</span></div>
	
		
	<!-- Tree #3 -->
		
	<p class="description">
		This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>
		A double-click handler selects the node. A keydown handler selects on [space].
	</p>
	<div id="tree3"></div>
	<div>Selected keys: <span id="echoSelection3">-</span></div>
	<div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
	<div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div>
		

	<!-- Tree #4 -->
		
	<p class="description">
		This tree has selectMode 2 (multi-selection) enabled, but <b>no checkboxes</b>.<br>
		A single-click handler selects the node. A keydown handler selects on [space].<br>
		A double-click handler expands documents.<br>
		A onQuerySelect handler prevents selection of folders.
	</p>
	<div id="tree4"></div>
	<div>Selected keys: <span id="echoSelection4">-</span></div>
	
		
	<!-- Start_Exclude: This block is not part of the sample code -->
	<hr>
	<p class="sample-links  no_code">
		<a class="hideInsideFS" href="http://dynatree.googlecode.com">jquery.dynatree.js project home</a>
		<a class="hideOutsideFS" href="#">Link to this page</a>
		<a class="hideInsideFS" href="samples.html">Example Browser</a>
		<a href="#" class="codeExample">View source code</a>
	</p>
	<!-- End_Exclude -->
</body>
</html>
